let cart_data = getId();
let data = [];
for (var id in cart_data) {
    data.push(cart_data[id]);
}
console.log(data);
render();

function reload() {
    data.length = 0
    for (var id in cart_data) {
        data.push(cart_data[id]);
    }
}

function getId() {
    try {
        let data = JSON.parse(localStorage.getItem("cart"))
        if (data === null) {
            return {}
        }
        return data;
    } catch (e) {
        return {};
    }
}

function total() {
    let totalprice = 0;
    $("#shop").find(".p4").each((index, item) => {
        let price = 0;
        if ($(item).siblings("input[type = 'checkbox']").is(":checked") === true) {
            price = parseInt($(item).text().slice(1));
        }
        totalprice += price;
    })
    $(".jiesuan .li6 span").text("￥" + totalprice)

}

function render() {
    let html = '';
    for (var i = 0; i < data.length; i++) {
        html = `<div class = "shop" data-id = ${data[i].id}>
                            <input type="checkbox" class="ck" />
                            <div class="tp">
                                <img src="${data[i].src}">
                            </div>
                            <p class="p1">${data[i].name}</p>
                            <p class="p3">￥${data[i].price}</p>
                            <div class="jj" data-id = ${data[i].id}>
                                <p class="jian">-</p>
                                <input type="text" class="num" value="${data[i].count}">
                                <p class="jia">+</p>
                            </div>
                            <p class="p4" >￥${parseInt(data[i].price)*data[i].count}</p>
                            <p class="p5">
                                删除
                            </p>
                    </div>`
        $("#shop").append(html);
    }
    total()
}

$("#shop").find(".jia").on("click", (e) => {
    let id = $(e.target).parent().attr("data-id")
        // console.log(id);
    cart_data[id].count++;

    $(e.target).parent().find(".num").val(cart_data[id].count)
    save();
    reload()
    $('.p4').each((index, item) => {
        $(item).text('￥' + parseInt(data[index].price) * data[index].count)
    })
    total()
})
$("#shop").find(".jian").on("click", (e) => {
    let id = $(e.target).parent().attr("data-id")
    console.log("down")
    if (cart_data[id].count < 2) {
        delete cart_data[id]
        $(e.target).parent().parent().remove()
    } else {
        cart_data[id].count--
    }
    try {
        $(e.target).parent().find(".num").val(cart_data[id].count)
    } catch (e) {

    }
    save();
    reload()
    $('.p4').each((index, item) => {
        $(item).text('￥' + parseInt(data[index].price) * data[index].count)
    })
    total()


})
$("#shop").find(".p5").on("click", (e) => {
    let id = $(e.target).parent().attr("data-id")
    delete cart_data[id]
    $(e.target).parent().remove()
    save();
    total()

})
$("#clear").on("click", (e) => {
    for (var id in cart_data) {
        delete cart_data[id];
        $("#shop").remove()
    }
    save();
    total();

});

$(".shopcar").on("change", "#all2", () => {
    if ($("#all2").is(":checked")) {
        $("#shop").find("input[type='checkbox']").each((index, item) => {
            $(item).prop("checked", true);
        })
        totalnum = $("#shop").children().length;
    } else {
        $("#shop").find("input[type='checkbox']").each((index, item) => {
            $(item).prop("checked", false);
        })
        totalnum = 0;
    }
    $(".jiesuan .li5 span").text(totalnum);
    total();
})
let totalnum = 0;
$("#shop").find("input[type='checkbox']").on("change", (e) => {
    if ($(e.target).is(":checked")) {
        $(e.target).prop("checked", true);
        totalnum++;
    } else {
        totalnum--;
    }
    total();
    $(".jiesuan .li5 span").text(totalnum);
})

$("#settlement").on("click", () => {
    if (parseInt($(".jiesuan .li6 span").text().slice(1)) === 0) {
        alert("请选择您要支付的商品");
    } else {
        alert("您要支付" + $(".jiesuan .li6 span").text());
        $("#shop").find($("input[type='checkbox']")).each((index, item) => {
            if ($(item).is(":checked") === true) {
                var id = $(item).parent().attr("data-id");
                delete cart_data[id];
                $(item).parent().remove()
            }
        })
    }
    save();
    reload();
})

function save() {
    localStorage.setItem("cart", JSON.stringify(cart_data));
}